<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化</title>
	</head>
	<body>
		<h1>局部组件</h1>
		<div id="app">
			<hello-com></hello-com>
			<hello-com></hello-com>
			<hello-com></hello-com>
		</div>
			
		<template id="helloTem">
			<div>
				<h1>我是局部组件AAAAAAAAA</h1>
				属性取值: {{msg}}
			</div>
		</template>	
			
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			
			//声明组件
			let helloCom = {
				//属性定义
				data(){
					return {
						msg: "我是局部组件"
					}
				},
				template: "#helloTem"
			}
			
			
			/* 说明:只能在某个VUE的对象之内,使用组件标签 */
			const app = new Vue({
				el:	"#app",
				data: {
				},
				methods: {
					
				},
				//定义局部组件
				components: {
					//组件key: 组件体
					helloCom: helloCom
				}
			})
			
		</script>
	</body>
</html>